<template >
  <!-- <div ref="pieChart" style="width: 23%; height: 30%; margin: 1%; /* 外边距 */"></div>
  <div ref="pieChart2" style="width: 23%; height: 30%; margin: 1%; /* 外边距 */"></div>
  <div ref="pieChart3" style="width: 23%; height: 30%; margin: 1%; /* 外边距 */"></div>
  <div ref="pieChart4" style="width: 23%; height: 30%; margin: 1%; /* 外边距 */"></div>
  <div ref="barChart1" style="width: 48%; height: 30%; margin: 1%; /* 外边距 */"></div>
  <div ref="pieChart5" style="width: 23%; height: 30%; margin: 1%; /* 外边距 */"></div>
  <div ref="pieChart6" style="width: 23%; height: 30%; margin: 1%; /* 外边距 */"></div>
  <div ref="barChart" style="width: 48%; height: 30%; margin: 1%; /* 外边距 */"></div>
  <div ref="pieChart7" style="width: 23%; height: 30%; margin: 1%; /* 外边距 */"></div>
  <div ref="pieChart8" style="width: 23%; height: 30%; margin: 1%; /* 外边距 */"></div> -->
</template>

<script>
import * as echarts from 'echarts';

export default {
name: 'ChartComponent',
mounted() {
  if (this.$refs.barChart && this.$refs.pieChart) {
    this.initCharts();
    window.addEventListener('resize', this.resizeCharts);
  } else {
    console.error('图表 DOM 元素未找到！');
  }
},
beforeUnmount() {
  // 组件销毁时移除事件监听
  window.removeEventListener('resize', this.resizeCharts);
},
methods: {
  initCharts() {
    // 初始化柱状图
    this.barChart = echarts.init(this.$refs.barChart);
    const barOption = {
      title: {
        text: '产品产量分布统计',
      },
      tooltip: {},
      xAxis: {
        data: ['产品A', '产品B', '产品C', '产品D'],
      },
      yAxis: {},
      series: [
        {
          name: '产量',
          type: 'bar',
          data: [10, 20, 15, 25],
        },
      ],
    };
    this.barChart.setOption(barOption);

    this.barChart1 = echarts.init(this.$refs.barChart1);
    const barOption1 = {
      title: {
        text: '产品产量分布统计',
      },
      tooltip: {},
      xAxis: {
        data: ['产品A', '产品B', '产品C', '产品D'],
      },
      yAxis: {},
      series: [
        {
          name: '产量',
          type: 'bar',
          data: [10, 20, 15, 25],
        },
      ],
    };
    this.barChart1.setOption(barOption1);

    // 初始化饼图
    this.pieChart = echarts.init(this.$refs.pieChart);
    const pieOption = {
      title: {
        text: '产品分类产量分布统计',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '分类产量',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: '分类1' },
            { value: 310, name: '分类2' },
            { value: 234, name: '分类3' },
            { value: 135, name: '分类4' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    this.pieChart.setOption(pieOption);
    this.pieChart2 = echarts.init(this.$refs.pieChart2);
    const pieOption2 = {
      title: {
        text: '产品分类产量分布统计',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '分类产量',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: '分类1' },
            { value: 310, name: '分类2' },
            { value: 234, name: '分类3' },
            { value: 135, name: '分类4' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    this.pieChart2.setOption(pieOption2);
    this.pieChart3 = echarts.init(this.$refs.pieChart3);
    const pieOption3 = {
      title: {
        text: '产品分类产量分布统计',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '分类产量',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: '分类1' },
            { value: 310, name: '分类2' },
            { value: 234, name: '分类3' },
            { value: 135, name: '分类4' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    this.pieChart3.setOption(pieOption3);
    this.pieChart4 = echarts.init(this.$refs.pieChart4);
    const pieOption4 = {
      title: {
        text: '产品分类产量分布统计',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '分类产量',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: '分类1' },
            { value: 310, name: '分类2' },
            { value: 234, name: '分类3' },
            { value: 135, name: '分类4' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    this.pieChart4.setOption(pieOption4);
    this.pieChart5 = echarts.init(this.$refs.pieChart5);
    const pieOption5 = {
      title: {
        text: '产品分类产量分布统计',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '分类产量',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: '分类1' },
            { value: 310, name: '分类2' },
            { value: 234, name: '分类3' },
            { value: 135, name: '分类4' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    this.pieChart5.setOption(pieOption5);

    this.pieChart6 = echarts.init(this.$refs.pieChart6);
    const pieOption6 = {
      title: {
        text: '产品分类产量分布统计',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '分类产量',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: '分类1' },
            { value: 310, name: '分类2' },
            { value: 234, name: '分类3' },
            { value: 135, name: '分类4' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    this.pieChart6.setOption(pieOption6);

    this.pieChart7 = echarts.init(this.$refs.pieChart7);
    const pieOption7 = {
      title: {
        text: '产品分类产量分布统计',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '分类产量',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: '分类1' },
            { value: 310, name: '分类2' },
            { value: 234, name: '分类3' },
            { value: 135, name: '分类4' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    this.pieChart7.setOption(pieOption7);

    this.pieChart8 = echarts.init(this.$refs.pieChart8);
    const pieOption8 = {
      title: {
        text: '产品分类产量分布统计',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '分类产量',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: '分类1' },
            { value: 310, name: '分类2' },
            { value: 234, name: '分类3' },
            { value: 135, name: '分类4' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    this.pieChart8.setOption(pieOption8);
    
    
  },
  resizeCharts() {
    if (this.barChart) {
      this.barChart.resize();
    }
    if (this.barChart2) {
      this.barChart2.resize();
    }
    if (this.barChart3) {
      this.barChart3.resize();
    }
    if (this.barChart4) {
      this.barChart4.resize();
    }
    if (this.barChart5) {
      this.barChart5.resize();
    }
    if (this.barChart6) {
      this.barChart6.resize();
    }
    if (this.barChart7) {
      this.barChart7.resize();
    }
    if (this.barChart8) {
      this.barChart8.resize();
    }
    if (this.pieChart) {
      this.pieChart.resize();
    }
    if (this.barChart1) {
      this.barChart1.resize();
    }
  },
},
};
</script>

<style scoped>
div {
float: left;
background-color: white;
border: 1px solid black; /* 可选，为了显示边框 */
box-sizing: border-box; /* 确保 padding 和 border 不会影响宽度计算 */
}

.inline-block-div1,
.inline-block-div2 {
width: 23%; /* 设置百分比宽度 */
height: 30%; /* 固定高度 */
padding: 1%; /* 内边距 */
margin: 1%; /* 外边距 */
}

.inline-block-div3,
.inline-block-div4 {
width: 23%; /* 设置百分比宽度 */
height: 30%; /* 固定高度 */
padding: 1%; /* 内边距 */
margin: 1%; /* 外边距 */
}

.inline-block-div5 {
width: 47.3%; /* 设置百分比宽度 */
height: 30%; /* 固定高度 */
padding: 1%; /* 内边距 */
margin: 1%; /* 外边距 */
}
</style>
<!-- <template>
<div id="app">
  <ChartComponent />
</div>
</template>

<script>
import ChartComponent from './ChartComponent.vue';

export default {
name: 'App',
components: {
  ChartComponent,
},
};
</script>

<style>
/* 全局样式可以根据需要调整 */
</style> -->